<template>
    <div class="customer" style="padding: 40px 20px 40px 0">
		
		<div style="width: 85%;">
			<el-row style="margin-bottom: 20px;">
			    <el-col :span="24">
			        <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="100px"> 
			               <el-button type="primary" @click="goBack()" style="margin-right: 10px;">返回</el-button>
			        </el-form>
			    </el-col>
			</el-row> 
			<el-table
			          :data="tableData"
			          style="margin-bottom: 20px;">
			          <el-table-column
			            width="300"
			            label="商品">
			        <template scope="scope">
			            <div style="display: inline-block;">
			                <img class="banner" :src="scope.row.goodCover" style="width:120px;" >
			            </div>
			            <div style="display: inline-block;width: 120px;vertical-align: middle;padding: 10px;">{{scope.row.goodName}}</div>
			        </template>
			        </el-table-column>
			        <el-table-column
			                prop="detailId"
			                label="内部订单号">
			        </el-table-column>
			        <el-table-column
			                label="单价/数量">
			                <template scope="scope">
			                    <span>{{ scope.row.goodPrice }}元/{{ scope.row.buyNum }}</span> 
			                </template>
			        </el-table-column>
			        <el-table-column
			                prop="detailId"
			                label="补贴比例">
			                <template scope="scope">
			                    <span>{{ scope.row.goodRatio*100 }}%</span> 
			                </template>
			        </el-table-column>
			        <el-table-column
			                prop="goodSpec"
			                label="规格">
			        </el-table-column>
			        <el-table-column
			                label="订单状态">
			                <template scope="scope">
			                    <span>{{ findState(scope.row.orderStat,orderState)}}</span>
			                </template>
			        </el-table-column>
			 </el-table>
			 <div style="width: 80%;margin: 0 auto;min-width: 1050px;padding-left: 50px" v-if="form.orderStat!=3&form.orderStat!=4&form.orderStat!=9&form.orderStat!=11">
			    <ol class="progress-wrap">
			        <li class="progress-one">
			            <div class="progress-line"></div>
			            <div class="progress-content">
			                <span class="progress-text" style="top: -30px;left:-20px;">买家下单</span>
			                <span class="progress-number" id="start">1</span>
			                <span class="progress-text">{{ form.orderTime }}</span>
			            </div>
			        </li>
			        <li class="progress-two">
			            <div class="progress-line"></div>
			            <div class="progress-content">
			                <span class="progress-text" style="top: -30px;left:-20px;">买家付款</span>
			                <span class="progress-number" id="second">2</span>
			                <span class="progress-text">{{ form.orderPayTime }}</span>
			            </div>
			        </li>
			        <li class="progress-three">
			            <div class="progress-line"></div>
			            <div class="progress-content">
			                <span class="progress-text" style="top: -30px;left:-20px;">商家发货</span>
			                <span class="progress-number" id="third">3</span>
			                <span class="progress-text">{{ firstData.orderDeliverTime }}</span>
			            </div>
			        </li>
			        <li class="progress-four">
			            <div class="progress-line"></div>
			            <div class="progress-content">
			                <span class="progress-text" style="top: -30px;left:-20px;">买家收货</span>
			                <span class="progress-number" id="end">4</span>
			                <span class="progress-text">{{ firstData.orderTakeTime }}</span>
			            </div>
			        </li>
			        <li class="progress-five">
			            <div class="progress-content">
			                <span class="progress-text" style="top: -30px;left:-40px;">买家评价订单完成</span>
			                <span class="progress-number" id="five">5</span>
			                <span class="progress-text">{{ firstData.evaluateTime }}</span>
			            </div>
			        </li>
			    </ol>
			</div>
			<el-form  :model="form"  style="background-color: #FFFFFF;padding: 10px 32px;display:inline-block;width: 600px;margin-top: 10px;" label-position="left" label-width="125px">
			 <h3 style="text-align: center;">支付信息</h3>
			        <el-form-item label="订单号:" >
			            <span>{{form.orderId}}</span>
			        </el-form-item>
			        <el-form-item label="支付方式:" >
			            <span>{{ findWay(form.orderPayType) }}</span>
			        </el-form-item>
			        <el-form-item label="商品总价（元）:">
			            <span>{{form.orderTotalAmount}}</span>
			        </el-form-item>
			       <el-form-item label="抵价券抵扣(元) ：">
			           <span>{{form.offsetAmount? form.offsetAmount:0}}</span>
			       </el-form-item>
			       <el-form-item label="红包股(元) ：">
			           <span>{{form.redPrice? form.redPrice:0}}</span>
			       </el-form-item>
			       <el-form-item label="会员卡(元) ：">
			           <span>{{form.storeCardPrice? form.storeCardPrice:0}}</span>
			       </el-form-item>
			        <el-form-item label="现金支付（元）:">
			            <span>{{form.offsetCash? form.offsetCash:0}}</span>
			        </el-form-item>
			        <el-form-item label="买家获得奖励券:">
			            <span>{{form.exchangeAmount}}</span>
			        </el-form-item>
			        <el-form-item label="用户申请退款时间:" v-if="form.orderReturnApplyTime">
			            <span>{{form.orderReturnApplyTime}}</span>
			        </el-form-item>
			        <el-form-item label="退款成功时间:" v-if="form.orderCancelTime">
			            <span>{{form.orderCancelTime}}</span>
			        </el-form-item>
			        <el-form-item label="取消原因:" v-if="form.orderCancelReason">
			            <span>{{form.orderCancelReason}}</span>
			        </el-form-item>
			</el-form>
			<el-form :model="form"  style="background-color: #FFFFFF;padding: 10px 32px;display:inline-block;vertical-align: top;margin-top: 10px;" label-position="left" label-width="125px">
			 <h3  style="text-align: center;">买家信息</h3>
			        <el-form-item label="买家：" >
			            <span>{{form.userName}}</span>
			        </el-form-item>
			        <el-form-item label="收货人：" >
			            <span>{{form.orderTakeName}}</span>
			        </el-form-item>
			        <el-form-item label="联系电话："  >
			            <span  >{{form.orderTakePhone}}</span>   
			        </el-form-item>   
			        <el-form-item label="收货地址：" style="margin-right:50px;">
			            <span >{{form.orderTakeAddress}}</span>   
			        </el-form-item>
			        <el-form-item label="买家留言:" >
			            <span>{{form.remark}}</span>
			        </el-form-item>  
					<el-form-item label="下单时间：">
					    <span >{{form.creTime}}</span>   
					</el-form-item>
			</el-form>
			    
		</div>
      
	</div>

</template>
<style>
.progress-wrap {
    padding: 0px;
    width: 100%;
    height: 100px;
}
 
.progress-wrap li {
    margin-top: 30px;
    list-style: none;
    float: left;
    width: 200px;
    height: 30px;
    position: relative;
}
 
.progress-wrap .progress-line {
    background-color: #b9b9b9;
    position: absolute;
    height: 8px;
    width: 100%;
    top: 13px;
    margin-left: 2px;
    transition: background-color 2s linear;
    -moz-transition: background-color 2s linear;
    -webkit-transition: background-color 2s linear;
    -o-transition: background-color 2s linear;
}
 
.progress-wrap .progress-content {
    position: absolute;
    text-align: center;
}
 
.progress-wrap .progress-content .progress-number {
    display: inline-block;
    *zoom:1;
    position: absolute;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    border-radius: 50%;
    border: 2px solid rgba(224,224,224,1);
    font-family: tahoma;
    font-weight: bold;
    font-size: 16px;
    background-color: #b9b9b9;
    box-shadow: 1px 1px 2px rgba(0,0,0,.2) inset;
    cursor: pointer;
}
 
.progress-wrap .progress-content .progress-text {
    position: absolute;
    font-size: 15px;
    width: 200px;
    text-align: left;
    top: 42px;
    left: -40px;
    color: black;
    font-weight: bold;
}
</style>
<script>
    export default {
        data() {
            return {
                title: '用户列表',
                table_loading: false,
                formInline: {
                    nickname: '',
                    mobile: '',
                    page: '',
                    type:'',
                    type2:'',
                    change:''
                },
                tableData: [],
                formLabelWidth: '120px',
                form:{
                    orderNumber:'',
                    userName:'',
                    total:0,
                    ebbyYuan:0,
                    cash:0,
                    prints:0
                },
                orderState:[{text:'待付款',value:'1'},{text:'取消',value:'2'},{text:'待发货',value:'3'},{text:'待收货',value:'4'},{text:'待评价',value:'5'},{text:'已完成',value:'6'}],
                payWay:[{text:'抵用券',value:'1'},{text:'现金支付',value:'2'},{text:'混合支付',value:'3'}],
                showSource:true,
                firstData:{},
				labelPosition: 'left'

            }
        },
        created(){
           this.fetchData()
        },
        mounted(){
           $(function() {
                var currentColor = '#3c3';
                var unfinishedColor = '#b9b9b9';
                var finishedColor = '#3c3';
         
                $('#start').click(function() {
                    $(this)
                    .css('background-color', currentColor)
                    .parent('div').prev('div.progress-line').css('background-color', unfinishedColor)
         
                    $('#second')
                    .css('background-color', unfinishedColor)
                    .parent('div').prev('div.progress-line').css('background-color', unfinishedColor)
         
                    $('#third')
                    .css('background-color', unfinishedColor)
                    .parent('div').prev('div.progress-line').css('background-color', unfinishedColor)
         
                    $('#end')
                    .css('background-color', unfinishedColor)
                    .parent('div').prev('div.progress-line').css('background-color', unfinishedColor)

                    $('#five')
                    .css('background-color', unfinishedColor)
                    .parent('div').prev('div.progress-line').css('background-color', unfinishedColor)
                })
         
                $('#second').click(function() {
                    $(this)
                    .css('background-color', currentColor)

                    .parent('div').prev('div.progress-line').css('background-color', unfinishedColor)
         
                    $('#start')
                    .css('background-color', finishedColor)
                    .parent('div').prev('div.progress-line').css('background-color', currentColor)
         
                    $('#third')
                    .css('background-color', unfinishedColor)
                    .parent('div').prev('div.progress-line').css('background-color', unfinishedColor)
         
                    $('#end')
                    .css('background-color', unfinishedColor)
                    .parent('div').prev('div.progress-line').css('background-color', unfinishedColor)

                    $('#five')
                    .css('background-color', unfinishedColor)
                    .parent('div').prev('div.progress-line').css('background-color', unfinishedColor)
                })
         
                $('#third').click(function() {
                    $(this)
                    .css('background-color', currentColor)
                    .parent('div').prev('div.progress-line').css('background-color', unfinishedColor)
         
                    $('#start')
                    .css('background-color', finishedColor)
                    .parent('div').prev('div.progress-line').css('background-color', finishedColor)
         
                    $('#second')
                    .css('background-color', finishedColor)
                    .parent('div').prev('div.progress-line').css('background-color', currentColor)
         
                    $('#end')
                    .css('background-color', unfinishedColor)
                    .parent('div').prev('div.progress-line').css('background-color', unfinishedColor)

                    $('#five')
                    .css('background-color', unfinishedColor)
                    .parent('div').prev('div.progress-line').css('background-color', unfinishedColor)
                })
         
                $('#end').click(function() {
                    $(this)
                    .css('background-color', currentColor)
                    .parent('div').prev('div.progress-line').css('background-color', unfinishedColor)
         
                    $('#start')
                    .css('background-color', finishedColor)
                    .parent('div').prev('div.progress-line').css('background-color', finishedColor)
         
                    $('#second')
                    .css('background-color', finishedColor)
                    .parent('div').prev('div.progress-line').css('background-color', finishedColor)
         
                    $('#third')
                    .css('background-color', finishedColor)
                    .parent('div').prev('div.progress-line').css('background-color', currentColor)

                    $('#five')
                    .css('background-color', unfinishedColor)
                    .parent('div').prev('div.progress-line').css('background-color', unfinishedColor)

                })

                $('#five').click(function() {
                    $(this)
                    .css('background-color', currentColor)

         
                    $('#start')
                    .css('background-color', finishedColor)
                    .parent('div').prev('div.progress-line').css('background-color', finishedColor)
         
                    $('#second')
                    .css('background-color', finishedColor)
                    .parent('div').prev('div.progress-line').css('background-color', finishedColor)
         
                    $('#third')
                    .css('background-color', finishedColor)
                    .parent('div').prev('div.progress-line').css('background-color', finishedColor)

                    $('#end')
                    .css('background-color', finishedColor)
                    .parent('div').prev('div.progress-line').css('background-color', finishedColor)

                    $('#five')
                    .css('background-color', finishedColor)
                    .parent('div').prev('div.progress-line').css('background-color', currentColor)
                })
            })
        },
        methods: {

            fetchData () {
                if (this.$route.query.type==1) {
                     this.dataApi.ajax('singleShopOrder',{orderId:this.$route.params.id}, res => {
                        if (res.responseType === 'S') {
                               this.tableData = res.shopOrderDto.shopOrderDetailDtos;
                               this.form = res.shopOrderDto
                               this.firstData=res.shopOrderDto.shopOrderDetailDtos[0]
                               if (this.form.orderStat==1) {
                                  $('#start').click()
                               }else if (this.form.orderStat==2) {
                                  $('#second').click()
                               }else if (this.form.orderStat==7) {
                                   $('#third').click()
                               }else if (this.form.orderStat==8) {
                                   $('#end').click()
                               }else if (this.form.orderStat==10) {
                                   $('#five').click()
                               }
                               
                        }
                    });
                }else{
                    this.dataApi.ajax('singleShopOrderDetail',{detailId:this.$route.params.id}, res => {
                        if (res.responseType === 'S') {
                               this.tableData[0] = res.shopOrderDetailDto;
                               this.form = res.shopOrderDto
                               this.firstData=res.shopOrderDetailDto
                               if (this.form.orderStat==1) {
                                  $('#start').click()
                               }else if (this.form.orderStat==2) {
                                  $('#second').click()
                               }else if (this.form.orderStat==7) {
                                   $('#third').click()
                               }else if (this.form.orderStat==8) {
                                   $('#end').click()
                               }else if (this.form.orderStat==10) {
                                   $('#five').click()
                               }
                        }
                    });
                }
                

            },
            handleCurrentChange(val) {
                this.fetchData(val)
            }

        }
    }
</script>
